<!DOCTYPE html>
<html>
<head>
	@include("/include/_header.html", {'title':'支付宝支付'}){}
</head>

<body>
	<div class="layui-fluid">
	  <div class="layui-row layui-col-space15">
	    <div class="layui-col-md12">
	      <div class="layui-card">
	        <div class="layui-card-header">支付宝支付</div>
	        <div class="layui-card-body">
	        
	          <div class="layui-form" wid100 lay-filter="" style="height: 180px;">
	          </br>
	          <div class="layui-form-item">
	              <label class="layui-form-label">付款金额</label>
	              <div class="layui-input-inline">
	                <input type="text" name="amount" id="amount" lay-verify="required" placeholder="请输入付款金额" autocomplete="off" class="layui-input">
	              </div>
	              <div class="layui-form-mid layui-word-aux" style="font-size: 16px; font-weight: bold;">元</div>
	              <div class="layui-form-mid layui-word-aux">演示支付宝支付，即网页生成二维码，用户使用支付宝扫描二维码发起支付</div>
	            </div>
	            <div class="layui-form-item">
	              <div class="layui-input-block">
	                <input type="button" class="layui-btn" lay-submit lay-filter="set_pay_ali" id="set_pay_ali" value="去支付">
	              </div>
	            </div>
	            
	          </div>
	        </div>
	      </div>
	    </div>
	  </div>
	</div>
	
	<!-- 微信订单管理 -->
	<div class="layui-fluid">
	    <div class="layui-row layui-col-space15">
	      <div class="layui-col-md12">
	        <div class="layui-card">
	          <div class="layui-card-body">
	          
	            <table class="layui-hide" id="func-ali-pre-order-table" lay-filter="func-ali-pre-order-table"></table> 
	          	<!-- 头部工具栏 -->
	            <script type="text/html" id="func-ali-pre-order-toolbar">
            	</script>
	            <!-- 表格操作按钮 -->
	            <script type="text/html" id="func-ali-pre-order-tool">
            	</script>
            	<script type="text/html" id="ali-order-status">
					{{#  if(d.status == '3'){ }}
            			<span class="layui-badge layui-bg-green">支付成功</span>
					{{#  } else if(d.status == '4'){ }}
            			<span class="layui-badge layui-bg-red">支付失败</span>
					{{#  } else if(d.status == '2'){ }}
            			<span class="layui-badge layui-bg-blue">提交成功</span>
					{{#  } else if(d.status == '1'){ }}
						<span class="layui-badge layui-bg-red">提交失败</span>
					{{#  } else if(d.status == '0'){ }}
						<span class="layui-badge layui-bg-orange">创建</span>
          			{{#  } else { }}
            			<span class="layui-badge layui-bg-orange">创建</span>
          			{{#  } }}
        		</script>
	          </div>
	        </div>
	      </div>
	    </div>
  	</div>
  
	<script type="text/javascript">
		  layui.config({
		     base: CXL.ctxPath + '/layuiadmin/' //静态资源所在路径
		  }).extend({
		    index: 'lib/index' //主入口模块
		  }).use(['index', 'layer', 'table'], function(){
			    var layer = layui.layer;
			    var $ = layui.$;
			    var table = layui.table;
			    
			    /**
    			  * 表格参数
     			 */
			    var Page = {
			        tableId: 'func-ali-pre-order-table',
			    	url: CXL.ctxPath + '/func/pay/ali/datagrid',
			    	toolbar:'#func-ali-pre-order-toolbar',
			    	where:{field:'createDate', order:'desc'},
			    	initColumn: function() {
			    		return [[
			    			     {type: 'numbers'}
    			    			,{field:'id', title: 'ID',hide:true, width:80}
     		        			,{field:'buyerId', title: '商户编号', width:160}
     		        			,{field:'createName', title: '用户名', width:120}
     		        			,{field:'outTradeNo', title: '订单号', width:180}
     		        			,{field:'subject', title: '商品', width:200}
     		        			,{field:'sellerId', title: '支付宝用户号', width:160}
     		        			,{field:'tradeNo', title: '支付宝订单号', width:190}
     		        			,{field:'totalAmount', title: '金额(分)', width:90}
     		        			,{field:'status', title: '状态', width:90, templet: '#ali-order-status'}
     		        			,{field:'orderTime', title: '订单时间', width:140}
     		        			,{field:'endTime', title: '完成时间', width:140}
     		        			,{field:'code', title: '网关返回码', width:140}
     		        			,{field:'msg', title: '网关返回码描述', width:300}
			    			]];	 
			    	}
			    };
    
			    /**
			      * 页面查询
			     */
			    Page.searchAction = function() {
			         var queryData = {};
			        
			         //排序字段
			         queryData['field'] = 'createDate';
			         queryData['order'] = 'desc';
			         
			         table.reload(Page.tableId, {where: queryData});
			    }
		    
    
    
			    /**
			     * 页面查询条件的重置
			     */
			    Page.resetAction = function() {
			    	$(".layui-input").val('');
			    	Page.searchAction();
			    }
			    
			    
			    /**
			     * 表格的单击事件
			     */
			    Page.clickAction = function(obj) {
			    }
			    
			    /**
			     * 表格的双击事件
			     */
			    Page.doubleClickAction = function(obj) {
			    	
			    }
			    
			    /**
			     * 查看
			     */
			    Page.openDetail = function(data) {
			    }
			    
			    /**
			       	 * 表格渲染
			     */
			    table.render({
			       elem: '#' + Page.tableId
			      ,url: Page.url
			      ,height: 'full-140'
			      ,page: true
			      ,limit : 30
			      ,autoSort:false
			      ,toolbar: Page.toolbar
			      ,where: Page.where
			      ,defaultToolbar: []
			     
			      ,cols: Page.initColumn()
			    });
    
			    /**
			    	 * 表头工具栏
			     */
			    table.on('toolbar(' + Page.tableId + ')', function(obj){
			      var checkStatus = table.checkStatus(obj.config.id);
			      
			    });
    
			    /**
			    	 * 监听表格工具事件
			     */
			    table.on('tool(' + Page.tableId + ')', function(obj){ 
			       //获得当前行数据
			      var data = obj.data;
			       //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			      var layEvent = obj.event; 
			     
			      //查看操作
			      if(layEvent === 'doBack'){
			    	  Page.doOpenBack(data);
			      } 
			    });
    
    
			    /**
			     * 搜索按钮事件
			     */
			    $('#btnSearch').click(function () {
			    	Page.searchAction();
			    });
			    
			    /**
			     * 搜索按钮事件
			     */
			    $('#btnReset').click(function () {
			    	Page.resetAction();
			    });
			    
			    //监听行单击事件
			    table.on('row(' + Page.tableId + ')', function(obj){
			       Page.clickAction(obj);
			    });
			     
			    //监听行双击事件
			    table.on('rowDouble(' + Page.tableId + ')', function(obj){
			    	Page.doubleClickAction(obj);
			    });
			    
			    
			    //点击去支付按钮
			    $("#set_pay_ali").click(function() {
			    	var money = $("#amount").val();
			    	
			    	 //校验金额
				    if(!(/^-?\d+\.?\d{0,2}$/.test(money) || /^\d+$/.test(money)) || money <= 0 || money > 50000) {
				    	CXL.warn("请输入正确的金额");
						return;
				    }
				    
				    $.ajax({
				      url: CXL.ctxPath + '/func/pay/wx/getOrderNo'
				      ,type: 'post'
				      ,success: function(res){ //这里要说明一下：done 是只有 response 的 code 正常才会执行。而 succese 则是只要 http 为 200 就会执行
				      	if(res.success) {
				      		var orderNo = res.obj;
				      		
				      		layer.open({
								type : 2,
								title : '支付宝支付',
								shadeClose : true,
								shade : 0.8,
								area : [ '950px', '700px' ],
								content : CXL.ctxPath + '/func/pay/ali/alipay?money=' + money + '&orderNo=' + orderNo,
								btn : ['关闭' ],
								end:function(){
								
									showConfirm(orderNo, money);
								}
							});
				      	}
				      }
				    });
				    
			    });
			    
			    //弹出页面
				function showConfirm(orderNo, money) {
			  		
					layer.confirm('请在新打开的页面完成付款操作', {
						 btn: ['已完成付款', '付款遇到问题']
						,area: ['300px', '180px']
					 	,yes: function(index, layero){
						    //主动查询订单的支付状态
						   	$.ajax({
						    	url: CXL.ctxPath + '/func/pay/ali/getOrderStatus',
						    	type: 'post',
						    	data:{orderNo:orderNo},
						    	success:function(r) {
						    		if(r.success) {
						    			var payStatus = r.obj;
						    			
						    			if(payStatus == 0){
						    				//跳转到充值记录页面
							    			layer.close(index);
							    			layer.msg("你已成功付款" + money + "元")
						    			}else{
						    				layer.close(index);
						    				showOk(orderNo, money);
						    			}
						    		}else {
						    			layer.close(index);
						    			showOk(orderNo, money);
						    		}
						    	}
						    });
						  }
						,btn2: function(index, layero){
							layer.close(index);
							layer.msg("请联系客服");
						}
					});
				}
				
				//点击继续
			  	function showOk(orderNo, money) {
			  		layer.alert('付款还未成功，请确认已经完成付款', function(index){
			  			showConfirm(orderNo, money);
			  		    layer.close(index);
			  		});  
			  	}
			  	
		  })
		  
	</script>
</body>